<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-12 09:15:49
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2023-11-23 15:16:35
 * @FilePath: \jzjypc4.0\src\views\ResourceCenter\beikeziyuan.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 备课资源包页 -->
  <div id="container">
    <div class="top">
      <!-- <div class="bread">
        <span>当前位置：</span>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: routeurl }" v-if="isSearch">{{routeNmae}}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: routeurl }" v-if="!isSearch">{{routeNmae}}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: fromPath}" v-if="bigTapName">{{ bigTapName }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: zybFlurl}" v-if="zybFlTitle">{{ zybFlTitle }}</el-breadcrumb-item>

          <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div> -->
      <div class="beikeziyuan">
        <div class="beike">
          <img src="../../assets/img/ziyuan.png"/>
          <div class="details" v-if="true">
            <div class="title">
              <h3>{{nicheng}} 分享给您的资源包</h3>
            </div>
            <div class="msg">
              <!-- <p v-html="sub_info"></p> -->
              <div class="bottom">
                <!-- <span class="seeNum"
                  ><i class="el-icon-view"></i>{{ view_nums }}</span
                > -->
                <span class="recNum"
                  >共<a>{{ kejianList.length }}</a
                  >份资源</span
                >
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="collect" v-if="sc_status == 0" @click="getCollect">
          <i class="el-icon-star-off"></i>
          <p>收藏本资源包</p>
        </div>
        <div class="collect getsc" v-if="sc_status == 1" @click="cancelCollect">
          <i class="el-icon-star-on"></i>
          <p>已收藏</p>
        </div> -->
      </div>
    </div>
    <div class="content">
      <div class="title1">
        <p>包内资源</p>
        <span>{{ kejianList.length }}份</span>
      </div>
      <div class="box">
        <div class="left">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            class="quanxuan"
            ><span v-trigger>全选</span></el-checkbox
          >
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item name="1">
              <template slot="title">
                <p class="jiaoyanClass"></p>
                <span v-show="chosedfl.indexOf('1') != -1" >收起</span>
                <span v-show="chosedfl.indexOf('1') == -1">展开</span>
              </template>
              <div>
                <el-checkbox-group
                  v-model="checkedClass"
                  @change="handleCheckedCitiesChange"
                >
                  <el-checkbox
                    v-for="item in kejianList"
                    :label="item"
                    :key="item.id"
                    :class="{ choseKj: kejianid == item.id }"
                  >
                    <img
                      src="../../assets/img/resFile (1).png"
                      alt="file_url"
                      v-if="
                        item.suffix == 'ppt' ||
                        item.suffix == 'pptx' ||
                        item.suffix == 'ppsx' ||
                        item.suffix == 'pps'
                      "
                    />
                    <img
                      src="../../assets/img/resFile (2).png"
                      alt="file_url"
                      v-if="item.suffix == 'mp4' || item.suffix == 'rm'"
                    />
                    <img
                      src="../../assets/img/resFile (3).png"
                      alt="file_url"
                      v-if="item.suffix == 'xls' || item.suffix == 'xlsx'"
                    />
                    <img
                      src="../../assets/img/resFile (4).png"
                      alt="file_url"
                      v-if="item.suffix == 'zip' || item.suffix == 'rar'"
                    />
                    <img
                      src="../../assets/img/resFile (5).png"
                      alt="file_url"
                      v-if="item.suffix == 'm4a' || item.suffix == 'mp3'"
                    />
                    <img
                      src="../../assets/img/resFile (6).png"
                      alt="file_url"
                      v-if="item.suffix == 'doc' || item.suffix == 'docx'"
                    />
                    <img
                      src="../../assets/img/resFile (7).png"
                      alt="file_url"
                      v-if="item.suffix == 'pdf'"
                    />
                    <img
                      src="../../assets/img/resFile (8).png"
                      alt="file_url"
                      v-if="item.suffix == 'png' || item.suffix == 'jpg'"
                    />
                    <div class="msg" @click.prevent="choseKj(item.id)">
                      <img src="../../assets/img/ffzyb/vip.png" v-if="item.is_sf == 1">
                      {{ item.title }}
                    </div>
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="right" @contextmenu.prevent="menuPlayer()">
          <div v-for="item in filePicList" :key="item.id">
            <img
              :src="item.file_url"
              alt=""
              v-if="
                item.file_ext == 'png' ||
                item.file_ext == 'jpg' ||
                item.file_ext == 'doc' ||
                item.file_ext == 'png' ||
                item.file_ext == 'docx' ||
                item.file_ext == 'xls' ||
                item.file_ext == 'pdf' ||
                item.file_ext == 'xlsx'
              "
            />
            <video
              muted="muted"
              class="video"
              :src="item.file_url"
              height="448px"
              width="800px"
              type="video/mp4"
              :poster="file_url"
              controls="controls"
              loop="-1"
              preload
              ref="startvideo"
              v-if="item.file_ext == 'mp4' || item.file_ext == 'rm'"
            ></video>
            <div
              class="mp3File"
              v-if="item.file_ext == 'mp3' || item.file_ext == 'm4a'"
            >
              <img
                src="../../assets/img/resFile (5).png"
                alt=""
                style="width: 74px"
              />
              <p>{{ item.title }}</p>
              <audio :src="item.file_url" controls></audio>
            </div>
          </div>
          <div class="jindu"></div>
          <p class="jindutext">已预览{{ v_per }}%，完整内容可下载后查看哦！</p>
          <div class="noFile" v-if="noFileShow">
            <p>当前文件暂无法提供预览，请您下载后查看</p>
          </div>
          <div class="downLoad">
            <p>{{nicheng}} 分享给您的资源包</p>
            <div class="choseDL">
              <div class="choseAgain">
                <div class="choseLists">
                  <div class="dLtop">
                    <el-checkbox
                      :indeterminate="isIndeterminate"
                      v-model="checkAll"
                      @change="handleCheckAllChange"
                      class="quanxuan"
                      ><span v-trigger></span
                    ></el-checkbox>
                    <p>全部课件</p>
                  </div>
                  <div>
                    <el-checkbox-group
                      v-model="checkedClass"
                      @change="handleCheckedCitiesChange"
                    >
                      <div class="dLits">
                        <el-checkbox
                          v-for="item in kejianList"
                          :label="item"
                          :key="item.id"
                          :class="{ choseKj: kejianid == item.id }"
                        >
                          <div class="msg">
                            <img src="../../assets/img/ffzyb/vip.png" v-if="item.is_sf == 1">
                            {{ item.title }}
                          </div>
                        </el-checkbox>
                      </div>
                    </el-checkbox-group>
                  </div>
                </div>
                <i class="el-icon-arrow-up"></i>
              </div>
              <span @click="downLoad">下载 {{ idArr.length }}份</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="guanggao" v-if="bannerList.length > 0">
      <div class="banner">
        <el-carousel
          height="160px"
          :autoplay="false"
          indicator-position="none"
          arrow="never"
        >
          <el-carousel-item v-for="(item, index) in bannerList" :key="index">
            <img
              :src="item.file_url"
              alt="banner图"
              @click="advert(item.http_url)"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div
      class="guanggao"
      v-if="bannerList.length <= 0"
      style="background: #f0f0f5; height: 40px"
    ></div>
    <!-- 下载登录弹窗 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="handleClose"
      custom-class="login"
    >
      <LoginTc />
    </el-dialog>
    <!-- 下载完成后未添加企业微信的弹窗 -->
    <downEvmTc v-if="downQwShow" :zykf_file_url= "zykf_file_url" @qwtcClose= "qwtcClose"></downEvmTc>
    <!-- 限制下载条数的弹窗 -->
    <fwbtj
      v-if="fwbtjShow"
      :choseGoodId="choseGoodId"
      :goods_lists="goods_lists"
      :caclose="true"
      @zixun ="zixun"
      @choseGood ="choseGood"
      @goyuyue="goyuyue"
      @closefwbtj ="closefwbtj"
    ></fwbtj>
    <!-- 问题咨询加客服弹窗 -->
    <wtzxTc
      v-if="zixunShow"
      :zykf_file_url="zykf1_file_url"
      @wtzxClose="wtzxClose"
    ></wtzxTc>
  </div>
</template>
<script>
import {
  islogin,
  info_kejianbao,
  info_kejian,
  url_kejian,
  plxz_url_arr,
  userinfo,
  banner,
  create_accountzysc,
  wxdlewm,
  upwxdl,
  list_kejian,
  qywx_status,
  ffzyb_status,
  download_nums,
  getgoodsbykejian
} from "../../api/http";
import { timeStamp2String } from "../../utils/time";
import LoginTc from "../../layout/components/loginTc.vue"
import downEvmTc from "../../components/zydownevm/zydownevm.vue";
import fwbtj from "../../components/fwbtj/fubtj.vue";
import wtzxTc from "../../components/wtzxTc/wtzxtc.vue";
export default {
   components: {
    LoginTc,
    downEvmTc,
    fwbtj,
    wtzxTc,
  },
  props: ["xitongMsg","kefuMsg"],
  data() {
    return {
      gundongTop: 0, //资源中心跳转过来时的滚动条高度
      kejianbao_id: "", //课件包id
      title: "", //课件标题
      from_int: "", //判断资源是否为精选
      update_time: "", //更新时间
      view_nums: "", //浏览次数
      sub_info: "", //简介
      chosedfl:[],//左侧选中展开的分类
      kejianList: [], //课件包包含的课件列表
      group_lists:[],//分类列表
      timeStamp2String, //时间戳转时间
      is_tj: 0, //是否为推荐
      activeNames: ['1'], //折叠面板默认打开值
      collapseFlag: false, //展示折叠或展开
      playFlag: true, //视频遮罩层是否显示
      file_url: "", //视频封面图，待定
      vedioPath: "", //视频地址
      checkAll: false, //全选是否选中
      checkedClass: [], //选中的课件数组
      isIndeterminate: true, //全选
      filePicList: [], //右侧要展示的内容组
      v_per: "", //右侧展示的内容百分比
      kejianTitle: "", //当前选择展示的课件详情名称
      suffix: "", //当前选择展示的课件详情类型
      kejianid: "", //当前选择展示的课件id，默认第一个
      noFileShow: false, //空图

      //下载内容
      idArr: [], //选中的课件组id
      urlArr: [], //选中的课件组下载链接数组

      //广告图
      nianji_ids: "", //年级id
      kemu_id: "", //科目id
      bannerList: [], //广告图列表

      scrollHight: "", //视口高度
      sc_status: "", //是否收藏

      loginStatus: "", //是否登录
      dialogVisible: false, //登录弹窗展示
      loginEvm: "", //扫码登陆二维码
      evmTimer: null, //扫码状态获取计时器

      
      dy_id:'',//资源包单元id
      type_id:'',//资源包类型 
      zdy_pic:'',//自定义资源包图片
      kemu_id:'',

      //是否是搜索页跳转来的
      isSearch:false,

      routeurl: "", //路径
      routeNmae: "", //路径名
      bigTapName:'',//同步资源页大菜单名
      fromPath:'',//同步资源地址
      zybFlTitle:'',//资源包分类名
      zybFlurl:'',//资源包分类地址

      chosed:'0',
      nicheng:'',

      have_zip: "", //是否有压缩包下载链接
      downQwShow:false,
      zykf_file_url:'',//资源客服二维码

      fwbtjShow:false,//服务包推荐弹窗 付费的未购买时弹出
      zixunShow:false,//咨询客服1二维码弹窗
      zykf1_file_url:'',//资源客服1二维码
      choseGoodId:'',//服务包推荐弹窗选中的商品id
      goods_lists: [], //商品列表
    };
  },
  created() {
    console.log(this.$route.query, "query参数");
    //回到顶部
    $(document).ready(function () {
      $(window).scrollTop(0);
    });
    //课件包详情
    // info_kejianbao({
    //   md5key: localStorage.getItem("md5key"),
    //   id: this.$route.query.id,
    // }).then((res) => {
      // if (res.retInt == 1) {
        // console.log(res, "课件包详情");
        // const data = res.retRes;
        // this.title = data.title;
        // this.update_time = data.update_time;
        // this.view_nums = data.view_nums;
        // this.sub_info = data.sub_info;
       
        // this.is_tj = data.is_tj;
        // this.kejianid = data.lists[0].id;
        // this.from_int = data.from_int;
        // this.type_id = data.type_id
        // this.zdy_pic = data.file_url
        // this.sc_status = data.sc_status;
        // this.kemu_id = data.kemu_id
        this.kejianversions_id = JSON.parse(
        this.$route.query.banben.replace('"([^"]*)"', "$1")
        );
        this.kemu_id = JSON.parse(
          this.$route.query.kemu_id.replace('"([^"]*)"', "$1")
        );
        this.nicheng = this.$route.query.title
        let obj = this.$route.query.ids.replace('"([^"]*)"', "$1");
        this.idArr = JSON.parse(obj);
        const arr = JSON.parse(obj);
        console.log(arr)
        list_kejian({
        md5key: localStorage.getItem("md5key"),
        ids: arr,
        }).then((res) => {
          console.log(res);
          this.checkedClass = this.kejianList = res.retRes;
          this.idArr = [];
          this.urlArr = [];
          this.checkedClass.forEach((item) => {
            this.idArr.push(item.id);
          });
          console.log(this.kejianList)
          //右侧默认展示第一个
          info_kejian({
            md5key: localStorage.getItem("md5key"),
            id: this.kejianList[0].id,
          }).then((res) => {
            if (res.retInt == 1) {
              console.log(res, "课件详情");
              this.filePicList = res.retRes.file_lists;
              this.kejianTitle = res.retRes.title;
              this.suffix = res.retRes.suffix;
              this.have_zip = res.retRes.have_zip;
              this.v_per = res.retRes.v_per;
              this.kemu_id = res.retRes.kemu_id;
              // const downLoad = document.getElementsByClassName("downLoad")[0]; //需要定位的下载栏
              if (res.retRes.file_lists.length == 0) {
                this.noFileShow = true;
              } else {
                this.noFileShow = false;
              }
              islogin({
                md5key: localStorage.getItem("md5key"),
              }).then((res) => {
                console.log(1231231221)
                this.loginStatus = res.retRes.login_status;
                if (this.loginStatus == 1) {
                  //获取个人信息拿取广告图
                  userinfo({
                    md5key: localStorage.getItem("md5key"),
                  }).then((res) => {
                    console.log(res, "个人信息");
                    const data = res.retRes;
                    (this.nianji_ids = data.nianji_id),
                      //获取详情页广告图
                      banner({
                        md5key: localStorage.getItem("md5key"),
                        systypes_id: 10004,
                        device_type_id: 201,
                        nianji_ids: this.nianji_ids,
                        kemu_ids: this.kemu_id,
                      }).then((res) => {
                        console.log(res, "资源详情页广告图");
                        this.bannerList = res.retRes;
                      });
                  });
                }
              });
            }
          });
        });

        // this.checkedClass = [];
        // this.group_lists = data.group_lists;
        // this.group_lists.forEach((item)=>{
        //   this.kejianList.push(...item.lists)
        //   this.checkedClass.push(...item.lists)
        // })
        //实现进入页面全选所有课件
        
        
        // this.idArr.forEach((item) => {
        //   url_kejian({
        //     id: item,
        //   }).then((res) => {
        //     const url = res.retRes.download_file_url;
        //     this.urlArr.push(url);
        //   });
        // });

        
      // }
    // });
  },
  mounted() {
    //监听滚动
    window.addEventListener("scroll", this.handleScrollY, true);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScrollY, true);
  },
  //自定义指令
  directives: {
    //进入页面点击全选按钮
    trigger: {
      inserted(el) {
        el.click();
      },
    },
  },
  methods: {
    //关闭服务包推荐弹窗
    closefwbtj(){
      this.fwbtjShow = false
    },
    //去预约
    goyuyue(id,goodsweek_id){
      console.log(id,this.kemu_id)
      this.$router.push({
          name: "Dingzhi",
          query: {
            id: id,
            goodsweek_id:goodsweek_id,
            kemu_id:this.kemu_id,
            type:'dy',
            gopay:1,
          },
        });
    },
    //选择商品
    choseGood(id,goodsweek_id){
      this.choseGoodId = id
      console.log(goodsweek_id,"ceshiceshi ")
    },
    //点击商品咨询按钮
    zixun(){
      console.log(this.kefuMsg)
      this.fwbtjShow = false
      this.zykf1_file_url = this.kefuMsg.zykf_file_url;
      console.log(this.zykf1_file_url)
      this.zixunShow = true
    },
    //关闭问题咨询添加客服1二维码弹窗
    wtzxClose(){
      console.log(123)
      this.zixunShow = false
      this.fwbtjShow = true
    },
    //收藏
    getCollect() {
      const ids = [];
      ids.push(this.kejianbao_id);
      create_accountzysc({
        md5key: localStorage.getItem("md5key"),
        ids: ids,
        type_id: 2,
        status: 1,
      }).then((res) => {
        if (res.retInt == 1) {
          info_kejianbao({
            md5key: localStorage.getItem("md5key"),
            id: this.$route.query.id,
          }).then((res) => {
            this.sc_status = res.retRes.sc_status;
          });
        }
      });
    },
    //取消收藏
    cancelCollect() {
      const ids = [];
      ids.push(this.kejianbao_id);
      create_accountzysc({
        md5key: localStorage.getItem("md5key"),
        ids: ids,
        type_id: 2,
        status: 2,
      }).then((res) => {
        if (res.retInt == 1) {
          info_kejianbao({
            md5key: localStorage.getItem("md5key"),
            id: this.$route.query.id,
          }).then((res) => {
            this.sc_status = res.retRes.sc_status;
          });
        }
      });
    },
    menuPlayer() {
      console.log("禁止右键");
    },
    //监听滚动事件
    handleScrollY() {
      const downLoad = document.getElementsByClassName("downLoad")[0]; //需要定位的下载栏
      const banner = document.getElementsByClassName("guanggao")[0]; //广告图参照物
      const left = document.getElementsByClassName("left")[0]; //左侧课件列表
      const title1 = document.getElementsByClassName("title1")[0]; //资源数量标题
      const right = document.getElementsByClassName("right")[0]; //资源数量标题
      // left.style.height = document.body.clientHeight -0 + 'px'
      // this.scrollHight = document.body.clientHeight -85 + 'px'
      if (
        banner.getBoundingClientRect().top > window.innerHeight &&
        banner.getBoundingClientRect().bottom > 0
      ) {
        downLoad.style.position = "fixed";
      } else {
        downLoad.style.position = "static";
      }

      if (
        title1.getBoundingClientRect().top < -30 &&
        banner.getBoundingClientRect().top > window.innerHeight
      ) {
        left.style.position = "fixed";
        left.style.top = "80px";
        right.style.marginLeft = "400px";
      } else {
        left.style.position = "static";
        right.style.marginLeft = "0px";
      }
      // console.log(document.body.clientHeight);
    },
    //折叠栏
    handleChange(e) {
      this.chosedfl = e
      console.log(e)
    },
    //全选按钮
    handleCheckAllChange(val) {
      this.checkedClass = val ? this.kejianList : [];
      this.isIndeterminate = false;
      // console.log(this.checkedClass, "全选按钮");
      this.idArr = [];
      this.urlArr = [];
      this.checkedClass.forEach((item) => {
        this.idArr.push(item.id);
      });
      // console.log(this.idArr, "yaya");
      // plxz_url_arr({
      //   md5key: localStorage.getItem("md5key"),
      //   kejianbao_id: this.kejianbao_id,
      //   ids: this.idArr,
      // }).then((res) => {
      //   console.log(res, "xiazai链接数组");
      //   this.urlArr = res.retRes;
      // });
    },
    //单选和全选的联动
    handleCheckedCitiesChange(value) {
      // console.log(this.checkedClass, "单选按钮");
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.kejianList.length;
      this.isIndeterminate =  checkedCount > 0 && checkedCount < this.kejianList.length;
      this.idArr = [];
      this.urlArr = [];
      this.checkedClass.forEach((item) => {
        this.idArr.push(item.id);
      });
      // console.log(this.idArr, "yaya");
      // plxz_url_arr({
      //   md5key: localStorage.getItem("md5key"),
      //   kejianbao_id: this.kejianbao_id,
      //   ids: this.idArr,
      // }).then((res) => {
      //   console.log(res, "xiazai链接数组");
      //   this.urlArr = res.retRes;
      // });
    },
    //选择课件，右侧展示
    choseKj(id) {
      // console.log(id);
      this.kejianid = id;
      const topHeight =
        document.getElementsByClassName("beikeziyuan")[0].offsetHeight;
      // console.log(topHeight, "顶部高度顶部高度");
      //点击后回到顶部
      $(document).ready(function () {
        $(window).scrollTop(topHeight + 84);
      });
      //下载按钮再次固定底部
      const downLoad = document.getElementsByClassName("downLoad")[0]; //需要定位的下载栏
      downLoad.style.position = "fixed";
      info_kejian({
        md5key: localStorage.getItem("md5key"),
        id: id,
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "课件详情");
          this.filePicList = res.retRes.file_lists;
          this.kejianTitle = res.retRes.title;
          this.suffix = res.retRes.suffix;
          this.v_per = res.retRes.v_per;
          if (res.retRes.file_lists.length == 0) {
            this.noFileShow = true;
          } else {
            this.noFileShow = false;
          }
        } else {
          this.$notify({
            message: res.retErr,
            duration: 2000,
            showClose: false,
          });
        }
      });
    },
    //获取文件下载链接
    // downLoad() {
    //   if (this.loginStatus == 1) {
    //     //当前已选中课件的下载链接数组
    //     plxz_url_arr({
    //       md5key: localStorage.getItem("md5key"),
    //       kejianbao_id: this.kejianbao_id,
    //       ids: this.idArr,
    //     }).then((res) => {
    //       // console.log(res, "xiazai链接数组");
    //       this.urlArr = res.retRes;
    //       this.urlArr.forEach((item) => {
    //         this.downloadFile(item);
    //         // console.log(item);
    //       });
    //     });
    //     // console.log(this.urlArr, "asdasdas");
    //     t;
    //   } else {
    //     this.dialogVisible = true;
    //     wxdlewm({
    //       md5key: localStorage.getItem("md5key"),
    //     }).then((res) => {
    //       if (res.retInt == 1) {
    //         console.log(res, "登录二维码");
    //         this.loginEvm = res.retRes.file_url;
    //         this.evmTimer = setInterval(() => {
    //           upwxdl().then((res) => {
    //             console.log(res, "扫码登录状态");
    //             if (res.retInt == 1 && res.retRes.login_status == 1) {
    //               let { href } = this.$router.resolve({
    //                 path: "/resource/resDetails",
    //                 query: {
    //                   id: this.kejianid,
    //                   gundongTop: document.documentElement.scrollTop,
    //                   path: this.routeurl,
    //                   routeName: this.routeNmae,
    //                 },
    //               });
    //               window.location.href = href;
    //               clearInterval(this.evmTimer);
    //               this.evmTimer = null;
    //             } else if (res.retInt == 0) {
    //               this.isyouxiao = false;
    //               clearInterval(this.evmTimer);
    //               this.evmTimer = null;
    //             }
    //           });
    //         }, 2000);
    //       }
    //     });
    //   }
    // },
    downLoad() {
      if (this.loginStatus == 1) {
        //当前已选中课件的下载链接数组
        const noPay = []
        this.checkedClass.forEach(y=>{
          if(y.is_sf == 1 && (y.gm_status == 0 || y.is_pay == 0)){
            noPay.push(y)
          }
        })
        console.log(noPay)
        if(noPay.length !=0){
          getgoodsbykejian({
            md5key: localStorage.getItem("md5key"),
            type:1,
            id:noPay[0].id,
          }).then(res=>{
            console.log(res,"xin 商量列表")
            if (res.retRes.length != 0) {
              this.goods_lists = res.retRes;
              this.goods_id = res.retRes[0].goods_id;
              this.fwbtjShow = true
            }
          })
        }else{
          this.getDownUrl();
        }
      } else {
        this.dialogVisible = true;
      }
    },
    //获取当前已选中课件的下载链接数组
    getDownUrl() {
      download_nums({
        md5key: localStorage.getItem("md5key"),
        kejianbao_id: this.kejianbao_id,
        kejian_ids: this.idArr,
      }).then((res) => {
        if (res.retInt == 1 && res.retRes.xz_status == 1) {
          plxz_url_arr({
            md5key: localStorage.getItem("md5key"),
            kejianbao_id: this.kejianbao_id,
            ids: this.idArr,
          }).then((res) => {
            if (res.retInt == 1) {
              this.urlArr = res.retRes;
              var i = 0;
              const that = this;
              var timer = setInterval(function () {
                console.log(that.urlArr[i]);
                that.downloadFile(that.urlArr[i]);
                i++;
                if (i > that.urlArr.length) {
                  clearInterval(timer);
                }
              }, 2000);
              setTimeout(() => {
                qywx_status({
                  md5key: localStorage.getItem("md5key"),
                  // kf_account:this.kefuMsg.zykf_account
                }).then((res) => {
                  console.log(res);
                  if (res.retRes.qywx_status == 0) {
                    ffzyb_status({
                      md5key: localStorage.getItem("md5key"),
                    }).then((res) => {
                      if (res.retRes.is_dy == 1) {
                        //未订阅 资源客服2二维码
                        this.zykf_file_url = this.kefuMsg.zykf1_file_url;
                        this.downQwShow = true;
                      } else {
                        //已订阅 资源客服1二维码
                        this.zykf_file_url = this.kefuMsg.zykf_file_url;
                        this.downQwShow = true;
                      }
                    });
                  }
                });
              }, 4000);
            }
          });
        } else {
          ffzyb_status({
            md5key: localStorage.getItem("md5key"),
          }).then((res) => {
            if (res.retRes.is_dy == 1) {
              //未订阅 资源客服2二维码
              this.zykf_file_url = this.kefuMsg.zykf1_file_url;
              this.xzxxShow = true;
            } else {
              //已订阅 资源客服1二维码
              this.zykf_file_url = this.kefuMsg.zykf_file_url;
              this.xzxxShow = true;
            }
          });
        }
      });
    },
    downloadFile(url) {
      const iframe = document.createElement("iframe");
      iframe.style.display = "none";
      iframe.style.height = 0;
      iframe.src = url;
      document.body.appendChild(iframe);
      // 1s之后删除
      setTimeout(() => {
        iframe.remove();
      }, 1000);
    },
    //跳转广告图
    advert(href) {
      window.open(href, "_blank");
    },
    //关闭登录弹窗
    handleClose() {
      this.dialogVisible = false;
    },
    //前往账号登录
    goLogin() {
      this.$router.push({
        name: "Login",
        query: {
          zhanghao: 1,
        },
      });
    },
  },
};
</script>
<style>
/* 面包屑 */
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: normal;
  color: #626366;
}
.el-breadcrumb__separator {
  color: #626366;
}
</style>
<style lang="less" scoped>
#container {
  width: 100%;
  background-color: #f0f0f5;
  overflow: hidden;
  span {
    user-select: none;
  }
  .top {
    margin: 0 auto;
    width: 1200px;
    overflow: hidden;
    .bread {
      display: flex;
      margin: 20px auto;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #626366;
      line-height: 24px;
      .el-breadcrumb {
        font-size: 14px;
        line-height: 24px;
        /deep/.el-breadcrumb__item:last-child {
          .el-breadcrumb__inner {
            color: #08a579;
            white-space: wrap;

            p {
              width: 350px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .beikeziyuan {
      display: flex;
      align-items: center;
      margin-top: 30px;
      background-color: #fff;
      overflow: hidden;
      .beike {
        display: flex;
        align-items: center;
        padding-top: 20px;
        margin-bottom: 20px;
        width: 1200px;
        // height: 150px;
        background-color: #fff;
        img {
          margin: 0px 25px 0 25px;
          width: 64px;
          height: 64px;
        }
        .details {
          width: 800px;
          padding-top: 20px;
          .title {
            display: flex;
            margin: 0;
            margin-bottom: 16px;
            span {
              display: inline-block;
              position: relative;
              top: 2px;
              margin-right: 10px;
              width: 40px;
              height: 20px;
              background: #f85230;
              border-radius: 4px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              color: #ffffff;
              line-height: 20px;
              text-align: center;
            }
            h3 {
              // margin-top: 22px;
              width: 800px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
          .msg {
            padding: 0;
            // width: 700px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            color: #626366;
            p {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
              line-height: 30px;
              margin-bottom: 5px;
              font-size: 12px;
              overflow: hidden;
            }
            ul {
              li {
                margin-right: 15px;
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
            .bottom {
              margin-top: 15px;
              margin-bottom: 15px;
              color: #939599;
              font-size: 12px;
              font-family: Microsoft YaHei;
              .upTime {
                margin-right: 29px;
              }
              .seeNum {
                margin-right: 30px;
                i {
                  margin-right: 5px;
                }
              }
              .recNum {
                a {
                  color: red;
                }
              }
            }
          }
        }
      }
      .zidingyi{
        margin-bottom: 0;
        img{
          margin: 20px;
          width: 100px;
          height: 120px;
        }
        .details{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 120px;
          margin-top: 0px;
          padding: 0;
          .title{
            margin: 0;
            margin-bottom: 4px;
          }
          .msg{
            p{
              position: relative;
              top: -30px;
            }
            .bottom{
              margin-bottom: 4px;
            }
          }
        }
      }
      .collect {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 60px;
        cursor: pointer;
        width: 100px;
        i {
          margin-bottom: 5px;
          font-size: 28px;
          color: #c8cacc;
        }
        p {
          font-size: 12px;
          color: #969799;
        }
      }
      .getsc {
        i {
          background-color: linear-gradient(-45deg, #7defcf, #05bc89);
          color: #05bc89;
        }
        p {
          color: #08a579;
        }
      }
    }
  }
  .content {
    margin: 0 auto;
    margin-bottom: 20px;

    width: 1200px;
    background-color: #fff;
    border: 1px solid #ccc;
    .title1 {
      display: flex;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      border-bottom: 1px solid #ccc;
      p {
        margin-left: 20px;
      }
      span {
        margin-right: 20px;
        color: #969799;
      }
    }
    .box {
      display: flex;
      .left {
        position: static;
        top: 0;
        width: 399px;
        border-right: 1px solid #ccc;
        border-radius: 1px solid #ccc;
        height: 92vh !important;
        overflow-y: scroll;
        /deep/.el-checkbox {
          display: flex;
          align-items: center;
          // margin: 20px 0 20px 23px;
          margin-left: 10px;
          padding-left: 10px;
          width: 360px;
          height: 107px;
          line-height: 56px;
          border-radius: 10px;
          .el-checkbox__label {
            display: flex;
            align-items: center;
            height: 56px;
            img {
              width: 59px;
              height: 67px;
            }
            .msg {
              display: inline-block;
              padding: 20px 0;
              padding-left: 20px;
              width: 210px;
              white-space: pre-wrap;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
              img{
                  position: relative;
                  top: 4px;
                  width: 33px;
                  height: 18px;
                }
            }
          }
        }
        /deep/.el-checkbox:first-child {
          // margin-top: 20px;
        }
        /deep/.el-collapse-item__content {
          // max-height: 77vh !important;
          // overflow-y: scroll;
        }
        
        .choseKj {
          background: #ebfaf5;
          border: 1px solid #08a579;
          .msg {
            color: #08a579;
          }
        }
        /deep/.el-checkbox__inner::before {
          display: none !important;
        }
        /deep/.el-collapse-item__header {
          display: flex;
          justify-content: space-between;
          background-color: #f0f2f5;
          p {
            margin-left: 20px;
            // width: 330px;
            color: #333333;
            font-weight: 900;
          }
          span {
            margin-right: 20px;
            color: #969799;
            font-size: 12px;
          }
          i{
            display: none;
          }
        }
        .quanxuan {
          margin: 0;
          margin-left: 10px;
          height: 45px;
        }
      }
        ::-webkit-scrollbar {
            width: 8px;
          }
        ::-webkit-scrollbar-track {
          background-color: #f5f5f5;
          -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
          border-radius: 5px;
        }
        ::-webkit-scrollbar-thumb {
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 5px;
        }
        ::-webkit-scrollbar-button {
          background-color: #eee;
          display: none;
        }
        ::-webkit-scrollbar-corner {
          background-color: black;
        }
      .right {
        position: relative;
        margin-left: 0px;
        width: 800px;
        img {
          width: 100%;
        }
        .mp3File {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          height: 448px;
          img {
            margin-top: 100px;
            width: 74px;
            height: 84px;
          }
          p {
            margin-top: 15px;
            margin-bottom: 60px;
            font-size: 16px;
            text-align: center;
          }
          audio {
            width: 600px;
          }
        }
        .noFile {
          height: 91%;
          // margin-top: 100px;
          p {
            width: 300px;
            margin: 0 auto;
            padding: 100px auto;
            font-size: 14px;
          }
        }
        .jindu {
          position: absolute;
          bottom: 120px;
          width: 800px;
          height: 50px;
          line-height: 50px;

          text-align: center;
          background-image: linear-gradient(
            180deg,
            hsla(0, 0%, 100%, 0),
            #fff 86%
          );
        }
        .jindutext {
          text-align: center;
          height: 60px;
          line-height: 60px;
          font-size: 14px;
          color: #999;
        }
        .downLoad {
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: fixed;
          bottom: 0;
          width: 800px;
          height: 60px;
          background: #ffffff;
          border-top: 1px solid #dee0e3;
          border-bottom: 1px solid #dee0e3;
          p {
            margin-left: 20px;
            width: 500px;
            font-size: 14px;
            color: #646566;
            display: -webkit-box; //对象作为弹性伸缩盒子模型显示
            overflow: hidden; //溢出隐藏
            // -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
            -webkit-line-clamp: 1; //设置 块元素包含的文本行数
          }
          .choseDL {
            display: flex;
            position: relative;
            // display: inline-block;
            margin-right: 20px;
            text-align: center;
            font-size: 14px;
            color: #fff;
            line-height: 40px;
            background: #08a579;
            // width: 120px;
            height: 40px;

            border-radius: 4px;
            cursor: pointer;
            .choseAgain {
              .choseLists {
                display: none;
                position: absolute;
                bottom: 40px;
                right: 00px;
                width: 400px;
                max-height: 600px;
                min-height: 100px;
                border: 1px solid #e6e6e6;
                background: #fff;
                border-radius: 10px;
                overflow-y: scroll;
                box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
                .dLtop {
                  display: flex;
                  justify-content: space-between;
                  margin-left: 10px;
                  margin-top: 12px;
                  padding-bottom: 10px;
                  border-bottom: 1px solid #e6e6e6;
                  p {
                    margin: 0;
                  }
                }
                .dLits {
                  margin: 10px 3px;
                  .el-checkbox {
                    display: flex;
                    align-items: center;
                    margin: 20px 10px;
                    .msg {
                      img{
                        position: relative;
                        top: 4px;
                        width: 30px;
                      }
                      text-align: left;
                      width: 320px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    }
                  }
                }
              }
              ::-webkit-scrollbar {
                width: 2px;
              }
              ::-webkit-scrollbar-track {
                background-color: #f5f5f5;
                -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
                border-radius: 5px;
              }
              ::-webkit-scrollbar-thumb {
                background-color: rgba(0, 0, 0, 0.2);
                border-radius: 5px;
              }
              ::-webkit-scrollbar-button {
                background-color: #eee;
                display: none;
              }
              ::-webkit-scrollbar-corner {
                background-color: black;
              }
              i {
                display: inline-block;
                width: 40px;
              }
            }
            .choseAgain:hover {
              .choseLists {
                display: block;
              }
            }
            span {
              display: inline-block;
              padding-right: 10px;
              // width: 80px;
              border-left: 1px solid #74c3a5;
            }
          }
        }
        .downLoad:hover {
        }
      }
    }
  }
  .banner {
    margin: 0px auto;
    margin-bottom: 20px;
    width: 1200px;
    height: 160px;
    background: #d3d6de;
  }
  .guanggao {
    margin: 0 auto;
    margin-bottom: 20px;
    width: 1200px;
    height: 160px;
    background: #d3d6de;
    cursor: pointer;
    .banner {
      margin: 0px auto;
      width: 100%;
      .el-carousel {
        width: 100%;
        height: 160px;
        // border-radius: 20px;
        .el-carousel__item {
          width: 100%;
          height: 160px;
          img {
            width: 100%;
            height: 160px;
          }
        }
      }
    }
  }
  /deep/.el-dialog {
    border-radius: 20px;
    overflow: hidden;
  }
  /deep/.el-dialog__headerbtn .el-dialog__close {
    margin-right: 10px;
    color: #c0c1c5;
    font-size: 18px;
    font-weight: 600;
  }
  /deep/.el-dialog__headerbtn {
    right: 36px;
  }
  .login {
    text-align: center;
    .tcTop {
      margin-bottom: 32px;
      text-align: center;
    }
    .dlevm {
      margin: 0 auto;
      text-align: center;
      width: 240px;
      height: 240px;
      img {
        width: 240px;
        height: 240px;
      }
    }
    p {
      margin-top: 16px;
      margin-bottom: 35px;
      text-align: center;
      font-size: 14px;
      color: #666;
    }
    .gologin {
      margin: 0 auto;
      text-align: center;
      width: 400px;
      height: 60px;
      line-height: 60px;
      color: #333;
      font-size: 16px;
      background: rgba(242, 237, 237, 0);
      border: 1px solid #dcdfe6;
      border-radius: 6px;
      cursor: pointer;
    }
  }
}
//下面的style为了处理多选框初始的样式问题
</style>

<style lang="less">
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #ccc !important;
  background-color: #08a579 !important;
}
.el-checkbox__inner {
  // margin-left: 10px !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #333 !important;
}
.el-checkbox__inner:hover {
  border-color: #08a579 !important;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #08a579 !important;
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #fff !important;
  color: #fff !important;
  width: 14px;
  height: 14px;
}
</style>